<template>
  <div class="imc2c-box" :style="{ height: `${height}px` }">
    <iframe :src="`${imUrl}/?token=${token}&userId=${userId}`" style="width: 100%;height: 100%; border: none; outline: none;"></iframe>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "Imc2c",
  data() {
    return {
      height: document.body.clientHeight - 84,
      imUrl: process.env.VUE_APP_IM_URL,
      token: localStorage.getItem("SET_USERID")
    };
  },
  created(){
    this.token = getToken();
    this.userId =  localStorage.getItem("SET_USERID")

  },
  mounted() {
    if (!window.ResizeObserver) return;
    const mainDom = document.querySelector(".main-container");
    const mainHeight = mainDom.getBoundingClientRect().height;
    if (mainDom.classList.contains("hasTagsView"))
      this.height =
        mainHeight - (mainDom.classList.contains("hasTagsView") ? 84 : 50);
    const observerMutation = new window.MutationObserver((e) => {
      e.forEach((item) => {
        if (item.type === "attributes" && item.attributeName === "class") {
          const mainHeight = mainDom.getBoundingClientRect().height;
          if (mainDom.classList.contains("hasTagsView"))
            this.height =
              mainHeight -
              (mainDom.classList.contains("hasTagsView") ? 84 : 50);
        }
      });
    });
    observerMutation.observe(mainDom, { attributes: true });
  },
};
</script>

<style rel="stylesheet/scss" lang="scss"></style>
